<template>
  <div class="production-upload-wrap">
    <div class="production-upload-content">
      <div class="info">
        <div>
          <span>名称：</span>
          <el-input v-model="name" placeholder="请输入名称"></el-input>
        </div>
        <div>
          <span>描述：</span>
          <el-input
            v-model="description"
            placeholder="请输入描述信息"
          ></el-input>
        </div>
        <div>
          <span>分类：</span>
          <el-input v-model="type" placeholder="请输入内容"></el-input>
        </div>
      </div>
      <el-divider class="divider" direction="vertical"></el-divider>
      <div>
        <el-upload
          class="upload-demo"
          drag
          action="#"
          :limit="1"
          :on-change="loadFile"
          :auto-upload="false"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">
              只能上传 jpg/png 文件，且不超过 500kb
            </div>
          </template>
        </el-upload>
      </div>
    </div>
    <div>
      <el-button type="primary" v-on:click="uploadFile">点击上传</el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { createGood } from "@/api/good";
import { ElMessage } from 'element-plus';
interface fileType {
  raw: any;
}
const name = ref("");
const description = ref("");
const type = ref("");
const file = ref({} as fileType);

const loadFile = (f: any) => {
  file.value = f;
};
const uploadFile = async () => {
  const formData = new FormData();
  formData.append("file", file.value.raw);
  formData.append("name", name.value);
  formData.append("description", description.value);
  const res: any = await createGood(formData);
  if (res.code === 200) {
    ElMessage.success('创建商品成功');
  } else {
    ElMessage.error('创建商品失败');
  }
};
</script>

<style scoped lang='scss'>
.production-upload-wrap {
  border: $border-style;
  border-radius: 3px;
  padding: 50px;
  .production-upload-content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
    .info {
      width: 360px;
      > div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 10px;
        > span {
          margin-bottom: 5px;
          color: $font-color-minor;
        }
      }
    }
    .divider {
      height: 400px;
      margin: 0 100px;
    }
  }
}
</style>
